<template>
  <el-dialog
    v-model="model"
    :close-on-click-modal="false"
    :title="title"
    width="450px"
    @open="resetFn(ruleFormRef)"
    @close="modal = false"
  >
    <div class="form">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="115px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="签署人姓名" prop="signerName">
          <el-input v-model="ruleForm.signerName" maxlength="32" placeholder="请输入签署人姓名" />
        </el-form-item>
        <div class="code">
          <el-form-item label="签署人证件号" prop="signerType">
            <el-select
              v-model="ruleForm.signerType"
              placeholder="请选择"
              style="width: 120px;"
            >
              <el-option
                v-for="item in globalData.SIGNER_TYPE_LIST"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label-width="5" prop="signerNumber">
            <el-input v-model="ruleForm.signerNumber" maxlength="32" placeholder="请输入签署人证件号" />
          </el-form-item>
        </div>
        <el-form-item label="添加/修改原因" prop="reason">
          <el-input v-model="ruleForm.reason" maxlength="32" type="textarea" placeholder="请输入" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="model = false">取消</el-button>
        <el-button type="primary" @click="okFn(ruleFormRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref } from 'vue'
import { validateWhiteListName, validateWhiteListNumber } from '@/util/validate'
import { addWhiteListApi } from '@/api/whiteList/management'
import globalData from '@/staticData/globalData'

export default {
  emits: ['refresh-list'],
  setup(props, { emit }) {
    const title = ref('白名单用户信息')
    const model = ref(false)
    const ruleFormRef = ref()
    const ruleForm = reactive({
      signerName: '',
      signerType: '',
      signerNumber: '',
      reason: ''
    })
    const rules = reactive({
      signerName: [
        { required: true, message: '请输入签署人姓名', trigger: 'change' },
        { validator: validateWhiteListName, trigger: 'change', required: true  }
      ],
      signerType: [
        {
          required: true,
          message: '请选择证件类型',
          trigger: 'change'
        }
      ],
      signerNumber: [
        { required: true, message: '请输入签署人证件号', trigger: 'blur, change' },
        { validator: validateWhiteListNumber, trigger: 'change', required: true }
      ],
      reason: [
        { required: true, message: '请输入添加/修改原因', trigger: 'blur, change' }
      ]
    })
    // 打开dialog
    const show = () => {
      model.value = true
    }
    // 重置
    const resetFn = formEl => {
      formEl.resetFields()
    }
    // 添加
    const okFn = async formEl => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          addWhiteListFn()
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    const addWhiteListFn = async() => {
      const res = await addWhiteListApi(ruleForm)
      if (!res) {
        ElMessage.success('添加成功')
        emit('refresh-list')
        model.value = false
      } else {
        ElMessage.error(res.message)
      }
    }
    return {
      title,
      model,
      show,
      ruleFormRef,
      ruleForm,
      rules,
      globalData,
      resetFn,
      okFn,
      addWhiteListFn
    }
  }
}

</script>

<style scoped lang="scss">
.code {
  display: flex;
}
</style>
